<template>
  <svg viewBox="0 0 200 200">
    <circle
      cx="100"
      cy="100"
      r="85"
      :stroke="bgStroke || 'none'"
      stroke-width="15"
      fill="none"
    />
    <circle
      cx="100"
      cy="100"
      r="85"
      :stroke="stroke || 'wihte'"
      stroke-width="15"
      fill="none"
      :stroke-dasharray="strokeDasharray"
      transform="rotate(-90, 100, 100)"
    />
  </svg>
</template>

<script
  lang="ts"
  setup
  name="Circle"
>
  // eslint-disable-next-line vue/require-prop-types
  const props = defineProps(['value', 'bgStroke', 'stroke'])

  const strokeDasharray = computed(() => {
    const l = 2 * Math.PI * 85,
      i = l / 100
    return `${props.value * i} ${l - props.value * i}`
  })
</script>
